<template>
	<view class="login">
		<view class="title" style="background-color: #fff;"></view>
		<view class="login_box">
			<view class="login_box_logo">
				<image src="@/static/login/logo.png" mode=""></image>
			</view>
			<view class="login_box_input">
				<view class="login_box_input_item">
					<uni-icons type="person" color="#bbb" size="20"></uni-icons>
					<input type="number" maxlength="11" v-model="uplogin.mobile" placeholder-style="color:#BBBBBB;"
						placeholder="请输手机号" />
				</view>
				<view class="login_box_input_item">
					<uni-icons type="locked" color="#bbb" size="20"></uni-icons>
					<input class="uni-input" v-model="uplogin.code" placeholder-style="color:#BBBBBB;"
						placeholder="请输入密码（6-14位）" :password="showPassword" />
					<uni-icons :type="!showPassword?'eye':'eye-slash'" @click="showPassword = !showPassword"
						color="#BBBBBB" size="20"></uni-icons>
				</view>
			</view>
			<view class="login_box_login" @click="account_loginFun">
				登录
			</view>
			<view class="login_box_bottom">
				<view class="login_box_bottom_left">
					忘记密码？
				</view>
				<view class="login_box_bottom_right">
					注册新账号
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		account_login
	} from "@/api/login.js"
	export default {
		data() {
			return {
				showPassword: true,
				uplogin: {
					mobile: '',
					code: ''
				},
			};
		},
		onLoad() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					if (res.data !== undefined) {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}
				}
			});
		},
		methods: {
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			async account_loginFun() {
				if (this.uplogin.mobile === '') {
					this.showinteraction('请输入手机号');
					return
				} else if (this.uplogin.code === '') {
					this.showinteraction('请输入密码');
					return
				}
				let res = await account_login(this.uplogin);
				if (res.status === 0) {
					this.showinteraction(res.result.message);
					return
				}
				if (res.result !== undefined || res.result !== null) {
					this.showinteraction(res.result.message);
					uni.setStorageSync("openid", res.result.openid);
					uni.switchTab({
						url: '/pages/home/home'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.login {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		background-image: url('@/static/login/loginbottom.png');
		background-repeat: no-repeat;
		background-position: bottom;
		background-size: 100%;
		position: relative;

		.login_box {
			width: 100%;
			height: 800rpx;
			position: absolute;
			top: 200rpx;
			left: 0;
			right: 0;
			margin: auto;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 0 84rpx;

			.login_box_logo {
				width: 160rpx;
				height: 160rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.login_box_input {
				width: 100%;
				margin-top: 50rpx;
				// background-color: #000;

				.login_box_input_item {
					width: 100%;
					height: 126rpx;
					padding: 60rpx 20rpx 0 20rpx;
					border-bottom: 1rpx solid #eeeeee;
					display: flex;

					input {
						padding: 0 40rpx;
						flex: 1;
					}

				}
			}

			.login_box_login {
				width: 100%;
				height: 95rpx;
				background-color: #856fff;
				margin-top: 80rpx;
				line-height: 95rpx;
				text-align: center;
				border-radius: 95rpx;
				color: #fff;
			}

			.login_box_bottom {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				margin-top: 30rpx;

				.login_box_bottom_right {
					color: #856FFF;
				}

				.login_box_bottom_left {
					color: #999999;
				}
			}
		}
	}
</style>